<!--数字类型的表格-->
<template>
    <div class="chart_margin">
      <Card style="padding: 0px 1rem;" >
        <div class="chat_title" v-text="titleData"></div>
        <div class="chat_number">
          <h1 v-text="numberData"></h1>
          <span v-text="unitData"></span>
        </div>
        <div v-text="descData" class="chat_desc"></div>
      </Card>



    </div>
</template>

<script>
    export default {
        name: "TiyNumberChart",
      props:{
          chatData:{
            type:Object,
            default:{
              title:'组件标题',
              number:'5,844.94',
              unit:'单位',
              desc:'具体的描述',
              extra:''
            }
          },
        unit:{
            type: String,
            default:''
        },
        title:{
          type: String,
          default:''
        },
     number:{
       type: String,
     default:''
     },
        desc:{
          type: String,
          default:''
        },
        extra:{
          type: String,
          default:''
        }


    },
      data(){
          return{

          }
      },
      computed:{
        unitData() {
          return this.checkEmpty(this.unit,this.chatData.unit);
        },
        titleData(){
          return this.checkEmpty(this.title,this.chatData.title);
        },
        numberData(){
          return this.checkEmpty(this.number,this.chatData.number);
        },
        descData(){
          return this.checkEmpty(this.desc,this.chatData.desc);
        },
        extraData(){
          return this.checkEmpty(this.extra,this.chatData.extra);
        }

      },
      methods:{
          checkEmpty(value1,value2,defaultValue){
            if (value1!==''&& value1!==undefined &&value1!==null){
              return value1;
            }else if (value2!==''&& value2!==undefined &&value2!==null) {
              return value2;
            }else{
              return defaultValue===undefined?'':defaultValue;
            }


        }

      }
    }
</script>

<style lang="less" scoped>

@import  (once,optional)  "chat_base";


  .chat_number{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    span{
      padding: 0px 0.5rem;
      color: #757575;
    }
  }




</style>
